<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible">
    <span slot="title" class="el-dialog__title">
      {{!dataid ? '新增 ' : '修改 '}}
      <strong>{{userName}}</strong> 数据权限
    </span>
    <div class="wrappers">
      <el-aside class="sider" style="width:200px;height:400px; " v-if="haveList">
        <div class="topslid">昇科化工有限公司</div>
        <el-tree
          :data="menuList"
          :props="menuListTreeProps"
          @node-click="roleNodeClick"
          highlight-current
        ></el-tree>
      </el-aside>
      <el-main>
        <el-form
          :inline="true"
          ref="dataForm"
        
          label-width="80px"
        >
          <div>
            <el-form-item label="权限类型">
              <el-radio-group v-model="radio1">
                <el-radio-button label="0">闸机</el-radio-button>
                <el-radio-button label="1">人脸识别立柱</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class>
            <el-checkbox-group v-model="checkedlabel" @change="handleCheckedCitiesChange">
              <el-checkbox
                border
                size="medium"
                v-for="item in antuList"
                :key="item.id"
                :label="item.id"
                v-if="radio1==item.type"
                style="margin:5px 10px;width:220px;overflow:hidden"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form>
      </el-main>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      haveList: true,
      visible: false,
      radio1: "0",
      userId: "",
      userName: "",
      menuList: [],
      menuListTreeProps: {
        children: "children",
        label: "lable"
      },
      antuList: [],
      checkedlabel: [],
      dataid: "",
      dataForm: {
        id: 0,
        roleName: "",
        remark: ""
      }
    };
  },
  methods: {
    init(data) {
      if (data) {
        this.userId = data.employee_id;
        this.userName = data.employeeName;
        this.dataid = data.id;
        this.haveList = false;
        this.getanthList();
      } else {
        this.userId = "";
        this.userName = "";
        this.dataid = "";
        this.haveList = true;
        //获取左边树结构
        this.$http({
          url: this.$http.adornUrl("/sys/org/employee/list"),
          method: "POST",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.menuList = data.list;
          this.getanthList();
        });
      }

      this.visible = true;
    },
    //左边选择
    roleNodeClick(data) {
      console.log(data);
      this.checkedlabel = [];
      if (data.type == "2") {
        this.userId = data.value;
        this.userName = data.lable;
      } else {
        this.userId = "";
        this.userName = "";
      }
      this.getanthList();
    },
    handleCheckedCitiesChange(data) {
      console.log(data);
    },

    //获取权限列表
    getanthList() {
      this.$http({
        url: this.$http.adornUrl("/sys/gate/authority/info"),
        method: "POST",
        params: this.$http.adornParams({
          employeeId: this.userId
        })
      }).then(({ data }) => {
        this.antuList = data.gates;
        if (data.entity && data.entity.id) {
          this.dataid = data.entity.id;
        } else {
          this.dataid = "";
        }
        let checkedlabel = data.gates.filter(
          item => item.checked && item.checked == "true"
        );
        this.checkedlabel = checkedlabel.map(item => item.id);
      });
    },
    // 表单提交
    dataFormSubmit() {
      let data = {
        id: this.dataid || undefined,
        employee_id: this.userId,
         is_del: "0",
        gate_ids: this.checkedlabel.join(",")
      };

      this.$http({
        url: this.$http.adornUrl(`/sys/gate/authority/save`),
        method: "post",
        data: this.$http.adornData({
          data: JSON.stringify(data)
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style   scoped>
.wrappers {
  display: flex;
  flex: 1;
  margin: -20px;
  align-items: stretch;
  border-bottom: 1px solid #cccccc;
}
.checkBoxs {
  display: flex;
  flex-wrap: wrap;
}
.topOpt {
  background-color: #f2f2f2;
  padding: 10px 20px;
}
.topslid {
  background-color: #1890ff;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
.sider {
  border-right: 1px solid #cccccc;
  height: 100%;
}
.topBar {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}
</style>
